<template>
  <div>
    <div class="content-item">
      <el-select v-model="queryParams.schoolAreaId"
                 placeholder="--校区--"
                 @change="cascade('campus')"
                 size="small">
        <el-option v-for="(item, index) in campus"
                   :key="index"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.campusId"
                 placeholder="--园区--"
                 @change="cascade('gardens')"
                 size="small">
        <el-option v-for="(item, index) in gardens"
                   :key="index"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.buildingId"
                 @change="cascade('buildings')"
                 placeholder="--楼栋--"
                 size="small">
        <el-option v-for="(item, index) in buildings"
                   :key="index"
                   :label="item.number + '-' + item.unitNumber"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.floorId"
                 @change="cascade('floors')"
                 placeholder="--楼层--"
                 size="small">
        <el-option v-for="(item, index) in floors"
                   :key="index"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="content-item">
      <el-transfer v-model="checkedRoomList"
                   @change="roomChange"
                   :titles="['未选', '已选']"
                   style="margin-top: 10px;"
                   :props="{key: 'id', label: 'name'}"
                   :data="rooms"></el-transfer>
    </div>

  </div>
</template>
<script>
import {
  listSchoolAreaByUserUsingGET,
  listCampusBySchoolAreaIdAndUserUsingGET,
  listBuildingByCampusIdAndUserUsingGET,
  listFloorByBuildingIdUsingGET,
  listRoomByConditionUsingPOST,
  floorRoomAdjustUsingPOST
} from '@api/auto'
export default {
  data () {
    return {
      queryParams: {
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        floorId: null
      },
      campus: [],
      gardens: [],
      buildings: [],
      floors: [],
      rooms: [],
      cascade (type) {
        const actions = new Map([
          ['campus', 'changeCampus'],
          ['gardens', 'changeGardens'],
          ['buildings', 'changeBuildings'],
          ['floors', 'changeFloors']
        ])
        let temp = actions.get(type)
        this[temp]()
      },
      // 校区change
      changeCampus () {
        this.queryParams.campusId = ''
        this.queryParams.buildingId = ''
        this.queryParams.floorId = ''
        this.rooms = []
        this.listCampusBySchoolAreaIdAndUserUsingGET(this.queryParams.schoolAreaId)
      },
      // 园区change
      changeGardens () {
        this.queryParams.buildingId = ''
        this.queryParams.floorId = ''
        this.rooms = []
        this.listBuildingByCampusIdAndUserUsingGET(this.queryParams.campusId)
      },
      // 楼栋change
      changeBuildings () {
        this.queryParams.floorId = ''
        this.rooms = []
        this.listFloorByBuildingIdUsingGET(this.queryParams.buildingId)
      },
      // 楼层change
      changeFloors () {
        this.rooms = []
        this.listRoomByConditionUsingPOST(this.queryParams.floorId, this.queryParams.buildingId)
      },
      checkedRoomList: []
    }
  },
  created () {
    this.listSchoolAreaByUserUsingGET()
  },
  methods: {
    // 获取校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET().then(res => {
        this.campus = res.data
      })
    },
    // 获取园区
    listCampusBySchoolAreaIdAndUserUsingGET (id) {
      listCampusBySchoolAreaIdAndUserUsingGET(id).then(res => {
        this.gardens = res.data
      })
    },
    // 获取楼栋
    listBuildingByCampusIdAndUserUsingGET (id) {
      listBuildingByCampusIdAndUserUsingGET(id).then(res => {
        this.buildings = res.data
      })
    },
    // 获取楼层
    listFloorByBuildingIdUsingGET (id) {
      listFloorByBuildingIdUsingGET(id).then(res => {
        this.floors = res.data
      })
    },
    // 根据楼层和楼栋id查询楼层下分布的房间
    listRoomByConditionUsingPOST (floorId, buildingId) {
      listRoomByConditionUsingPOST(floorId, buildingId).then(res => {
        this.rooms = res.data
        this.checkedRoomList = []
        res.data.forEach(item => {
          if (item.checkStatus) {
            this.checkedRoomList.push(item.id)
          }
        })
      })
    },
    // 房间左右移动
    roomChange (valList, direction, moveList) {
      let params = []
      valList.forEach(item => {
        this.rooms.forEach(ele => {
          if (ele.id === item) {
            params.push(ele.id)
          }
        })
      })
      if (direction === 'right') {
        floorRoomAdjustUsingPOST({ floorId: this.queryParams.floorId, roomIdList: params }).then(res => {
          this.$message.success('添加成功')
        })
      } else {
        floorRoomAdjustUsingPOST({ floorId: -1, roomIdList: moveList }).then(res => {
          this.$message.success('移除成功')
        })
      }
    }
  }
}
</script>
